<!--
 * @Date: 2023-04-04 15:51:55
 * @LastEditTime: 2023-05-10 10:41:45
-->
<template>
  <div class="project">
    <div class="search">
      <a-card :bordered="false">
        <SearchForm ref="SearchForm" @search="search" @empty="search({})" :formData="SearchForm" />
      </a-card>
    </div>
    <div class="data">
      <a-card :bordered="false">
        <a-space>
          <a-button type="primary" class="new_btn" @click="newProject">新增项目</a-button>
        </a-space>

        <s-table ref="table" size="default" rowKey="project_id" :columns="columns" :data="loadData">
          <template slot="project_language" slot-scope="text, record">
            <Tag
              v-for="item in text"
              :closable="false"
              :tag="item.language"
              :key="item.language_id"
              :labelName="{ label: 'language_name' }"
              :isDefault="record.default_language_id === item.language_id"
            />
          </template>
          <template slot="action" slot-scope="text, record">
            <a-space>
              <a-button type="link" @click="editProject(record)">编辑项目</a-button>
              <a-button class="del_btn" type="link" @click="delProject(record.project_id)">删除项目</a-button>
            </a-space>
          </template>
        </s-table>
      </a-card>
    </div>

    <AddProject ref="addProjectRef" @success="$refs.table.refresh(true)" />
  </div>
</template>

<script>
import { STable, SearchForm, Tag } from '@/components'
import AddProject from './createUpdate.vue'
import { deleteProject, projectList } from '@/api/project'

const columns = [
  {
    title: '项目名称',
    dataIndex: 'project_name',
    width: 100,
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'project_name' }
  },
  {
    title: '项目语言',
    dataIndex: 'project_language',
    width: 300,
    align: 'center',
    scopedSlots: { customRender: 'project_language' }
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 150,
    align: 'center',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'ProjectList',
  components: { SearchForm, STable, Tag, AddProject },
  data () {
    return {
      scrollWidth: 0,
      scrollHeight: 0,
      SearchForm: [
        { props: { type: 1, placeholder: '请输入项目名称' }, label: '项目名称', word: 'key' },
        { props: { type: 4 }, label: '创建时间', word: 'time' }
      ],
      queryParam: {},
      columns,
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)

        return projectList(requestParameters).then((res) => {
          // 将默认语言放到第一
          const result = { ...(res.data || { list: [] }) }
          result.list.map((item) => {
            const { default_language_id, project_language } = item

            const defaultLanguage = project_language.find((language) => language.language_id === default_language_id)
            const tempArr = project_language.filter((language) => language.language_id !== default_language_id)

            tempArr.unshift(defaultLanguage)

            item.project_language = tempArr
            return item
          })
          return result
        })
      },
      projectInfo: {}
    }
  },
  mounted () {},
  methods: {
    // 搜索
    search (e) {
      if (Object.keys(e).length) {
        const { time } = e
        e.start_time = time[0]
        e.end_time = time[1]
        delete e.time
      }

      this.queryParam = e
      this.$refs.table.refresh(true)
    },
    // 新建项目
    newProject () {
      this.$refs.addProjectRef.open()
    },
    // 编辑项目
    editProject (project) {
      this.$refs.addProjectRef.open()
      this.$refs.addProjectRef.modalType = 1

      const { project_id, project_name, default_language_id: language_id, project_language } = project
      const language = []
      const checkedArr = []
      let defaultLanguage = {}

      project_language.forEach((item) => {
        language.push(item.language_id)
        checkedArr.push(item.language)
      })
      defaultLanguage = project_language.find((item) => item.language_id === language_id)

      this.$refs.addProjectRef.checkedArr = checkedArr
      this.$refs.addProjectRef.defaultLanguage = defaultLanguage
      this.$refs.addProjectRef.form = { project_id, project_name, language_id, language }
    },
    // 删除项目
    delProject (id) {
      this.$confirm({
        content: '确认删除?',
        onOk: () => {
          console.log(id)
          deleteProject({ project_id: id }).then((res) => {
            const type = res.code === 200 ? 'success' : 'error'
            this.$message[type](res.msg)
            this.$refs.table.refresh(true)
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.project {
  height: 100%;

  .search {
    height: 128px;

    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
  }
  .data {
    height: calc(100% - 128px - 25px);
    margin-top: 25px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0;
    }

    :deep(.ant-card) {
      .new_btn {
        margin-bottom: 10px;
      }

      .del_btn {
        color: red;
      }
    }
  }
}
</style>
